<template>
	<div class="cartcontrol">
		<div class="cart-decrease" v-show="food.count>0" @click="decreaseCart"></div>
		<div class="cart-count" v-show="food.count>0">{{food.count}}</div>
		<div class="cart-add" @click="addCart"></div>
	</div>
</template>

<script>
	import Vue from 'vue';
	
	
	export default{
		props:{
			food:{
				type:Object
			}
		},
		methods:{
			addCart:function(event){
				//切换到PC模式，不多次触发此点击事件
				if(!event._constructed){
					return false;
				}
				if(!this.food.count){
					//因为this.food不是本组件的属性，所以需要调用Vue.set()接口
					Vue.set(this.food,'count',1);
					//this.food.count = 1;
				}else{
					this.food.count++;
				}
				//console.log('click')
			},
			decreaseCart:function(event){
				if(!event._constructed){
					return false;
				}				
				if(this.food.count){
					this.food.count--
				}
			}
		}
	}
</script>

<style>
	.cartcontrol{
		font-size: 0;
	}
	.cart-decrease,.cart-add{
		display: inline-block; 
		width: 25px;
		height: 25px;
		line-height: 24px;
		font-size: 24px;
		color: rgb(0,160,220);
	}
	.cart-count{
		display: inline-block;
		vertical-align: top;
		min-width: 21px;
		line-height: 25px;
		text-align: center;
		font-size: 15px;
		color: rgb(147,153,159);
	}
	.cart-add{
		background: url(add-food.png) no-repeat center;
		background-size: 25px;
	}
	.cart-decrease{
		background-image: url(tiny-icon.png);
	    background-size: 150px 350px;	
	    background-position: -15px -28px;	
	}

</style>